<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-07-08 14:26:03
 * @LastEditTime: 2022-09-01 13:29:23
 * @FilePath: \ypcmsvue3\src\components\global\yphasone.vue
 * @Description:此组件传入控制器和显示字段
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
    <div v-if="isload">
        <div class="flex space-x-2">
            <div @click="showList=true">
                <div class="border rounded h-8 w-32 flex items-center px-2 text-blue-600 relative">
                    <div v-text="title"></div>
                    <div class="absolute right-0" v-show="modelValue">
                        <i class="ri-close-circle-fill duration-300 mr-2 text-hui-200 hover:text-hong-300" @click.stop="removeId"></i>
                    </div>
                </div>
            </div>
        </div>
        <teleport to='body'>
            <div class="absolute left-0 top-0 w-full h-full bg-black bg-opacity-60 flex justify-center" v-if="showList">
                <div class="bg-white w-1/2 mt-52 max-h-[770px] rounded overflow-hidden">
                    <div class="flex justify-between border-b bg-gray-50">
                        <div class="p-3 font-bold">选择数据</div>
                        <div class="p-3" @click="showList=false">
                            <i class="ri ri-close-line ri-xl hover:text-red-500"></i>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2 p-5">
                        <div>
                            <ypinput v-model="searchData.keyword" placeholder="关键词" @keyup.enter="gosearch"></ypinput>
                        </div>
                        <div>
                            <button class="btn btn-hong" @click.stop="gosearch">查询</button>
                        </div>
                    </div>
                    <div class="max-h-[600px] p-5 overflow-hidden overflow-y-auto">
                        <div class="grid grid-cols-3 gap-5 text-sm">
                            <div class="text-center p-2 bg-gray-50 text-gray-700 hover:bg-blue-50 flex justify-between items-center" v-for="(item,index) in dataList">
                                <div class="flex-1" :class="{'text-sky-500':item.havesid}" @click="findChild(item)">{{ item.title }}</div>
                                <div><button class="btn btn-lan" @click="selected(item)">选择</button></div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3" v-if="pageData.pageCount>1">
                        <yppage @topage="topage" :pageData="pageData" />
                    </div>
                </div>
            </div>
        </teleport>
    </div>
</template>

<script setup>
    import {getData} from "@/common/base"
    import {ref,watch,reactive,onMounted} from "vue"
    const props=defineProps({
        modelValue: {
            default: 0
        },
        pid:{
            default:0
        },
        controller:{
            default:''
        },
        colkey:{
            default:'title'
        },
        exclude:{
            default:null
        },
        defaultTitle:{
            default:'--请选择--'
        }
    })
    const emits = defineEmits(['update:modelValue'])
    const isload=ref(false)
    const showList=ref(false)



    const title=ref(props.defaultTitle)

    //search
    const searchData=reactive({
        keyword:'',
        id:props.exclude,
        page:0,
        pid:0
    })

    //分页
    const  pageData=reactive({
        totalRecords:0,//总记录数
        pageCount:0,//总页数
        currentPage:1//当前页
    });

    const topage = (page) => {
        pageData.currentPage=page
        searchData.page=page
        getList()
    }


    const dataList=reactive([])

    const selected=(obj)=>{
        emits('update:modelValue', obj.id)
        title.value=obj.title
        showList.value=false
    }
    watch(showList,async (n,o)=>{
        if(n){
            searchData.page=0
           await getList()
        }
    })

    const findChild=(item)=>{
        console.log(item)
        if(item.havesid==0){
            return
        }
        
        searchData.pid=item.id
        getList()
    }


    const getList=async ()=>{
        const resp= await getData(props.controller+'/index',searchData)
        if(resp.code==1){

            pageData.currentPage = resp.data.current_page
            pageData.pageCount = resp.data.last_page
            pageData.totalRecords = resp.data.total
            dataList.length=0

            Object.keys(resp.data.data).map((k)=>{
                dataList.push(
                    {
                        id:resp.data.data[k].id,
                        title:resp.data.data[k].title,
                        havesid:resp.data.data[k].havesid
                    }
                    )
            })
        }
    }
    const gosearch=async ()=>{
        searchData.page=0
        await getList()
    }
    const read=async(id)=>{
        const resp= await getData(props.controller+'/read',{id:id})
        if(resp.code){
            title.value=resp.data.title
        }
    }

    const removeId=()=>{
        title.value=props.defaultTitle
        emits('update:modelValue',null)
    }

    onMounted(async()=>{
        if(props.modelValue){
            await read(props.modelValue)
        }
        console.log(props.pid)
        isload.value=true
    })

</script>